<template>
  <div class='container'>
    <div class="app-container">
      <el-row
        type="flex"
        style="flex-wrap:wrap;"
      >
        <el-col
          :span="6"
          class="box"
        >【题型】：{{questionType}}</el-col>
        <el-col
          :span="6"
          class="box"
        >【编号】：{{id}}</el-col>
        <el-col
          :span="6"
          class="box"
        >【难度】：{{difficulty}}</el-col>
        <el-col :span="6">【标签】：{{tags}}</el-col>
        <el-col :span="6">【学科】：{{subjectName}}</el-col>
        <el-col :span="6">【目录】：{{catalogID}}</el-col>
        <el-col :span="5">【方向】：{{direction}}</el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <!-- 题干部分 -->
      <span>【题干】：</span>
      <p
        v-html="question"
        style="color:blue"
      ></p>
      <!-- 单选内容 -->
      <div class="singleSelection">单选题 选项：（以下选中的选项为正确答案）</div>
      <el-row>
        <el-radio-group v-model="isNum">
          <el-radio
            :label="item.isRight"
            v-for="item in options"
            :key="item.id"
            :value="item.code"
            :disabled="item.isRight===0"
          >
            {{item.title}}
          </el-radio>
        </el-radio-group>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <div>
        <span>【参考答案】：</span>
        <a :href="videoURL">
          <el-button type="danger">视频答案预览</el-button>
        </a>
      </div>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <el-row>【答案解析】：
        <span
          v-html="answer"
          style="display:inline-block"
        ></span>
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <span>【题目备注】：{{remarks}}</span>
      <!-- 关闭按钮 -->
      <el-row
        style="margin-top:30px"
        type="flex"
        justify="end"
      >
        <el-button
          type="primary"
          @click="doClose"
        >关闭</el-button>
      </el-row>
    </div>

  </div>
</template>

<script>
import { detail } from '../../api/hmmm/questions'
export default {
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      radio: 0,
      questionType: '', // 题型
      id: '', // 试题编号
      difficulty: '', // 难度
      tags: '', // 标签
      subjectName: '', // 学科
      catalogID: '', // 目录
      direction: '', // 方向
      question: '',
      options: [], // 单选数组
      isNum: 1, // 单选v-model的值
      videoURL: '', // 视频地址
      answer: '', // 答案解析
      remarks: '' // 题目备注
    }
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      console.log(this.row)
      const res = await detail(this.row) // 获取试题详情列表api
      console.log(res)
      this.questionType = res.data.questionType
      this.id = res.data.id
      this.difficulty = res.data.difficulty
      this.tags = res.data.tags
      this.subjectName = res.data.subjectName
      this.catalogID = res.data.catalogID
      this.direction = res.data.direction
      this.question = res.data.question
      this.options = res.data.options
      this.videoURL = res.data.videoURL
      this.answer = res.data.answer
      this.remarks = res.data.remarks
      console.log(this.options)
    },
    doClose () {
      this.$emit('closeFn')
    }
  }
}
</script>

<style scoped lang='scss'>
.box {
  margin-bottom: 20px;
}
.singleSelection {
  margin-bottom: 20px;
}
</style>
<style>
.el-radio-group {
  display: flex;
  flex-direction: column;
}
.el-radio {
  margin-bottom: 20px;
}
</style>
